<template>
  <div class="equipment">
    <Search @sendInfo="receiveInfo" :searchTitle="'商品搜索:'" />
    <div class="list">
      <el-row>
        <el-col :span="4"
          ><el-button icon="iconfont icon-jiahao" type="warning"
            >新建</el-button
          ><el-button type="info" @click="moreOperation">导入数据</el-button></el-col
        >
      </el-row>
      <el-table
        ref="singleTable"
        :data="equipmentInfo.currentPageRecords"
        highlight-current-row
        center
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" type="index" width="150" height="45">
        </el-table-column>
        <el-table-column align="center" property="skuName" label="商品名称"> </el-table-column>
        <el-table-column align="center" label="商品图片">
          <template #default="{ row }">
            <img :src="row.skuImage" />
          </template>
        </el-table-column>
        <el-table-column align="center" property="brandName" label="品牌"></el-table-column>
        <el-table-column align="center" property="unit" label="规格"></el-table-column>
        <el-table-column align="center" property="price" label="商品价格"></el-table-column>
        <el-table-column
          align="center"
          property="skuClass.className"
          label="商品类型"
        ></el-table-column>
        <el-table-column align="center" label="创建日期">
          <template #default="{ row }">
            {{ row.createTime.replace('T', ' ') }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click.native="editInfo(row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :searchTaskList="equipmentInfo"
        @currentSizeChange="(value) => (equipmentInfoParams.pageSize = value)"
        @currentPageChange="(value) => (equipmentInfoParams.pageIndex = value)"
      />
    </div>
    <!-- 导入数据 -->
    <Dialog :dialogVisibleInfo="dialogVisibleOperation" @dialogClose="dialogCloseOperation"
      ><template #body>
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="标题:">
          </el-form-item>
          <el-form-item class="confirm">
            <el-button type="primary" @click="submitPolicy">确认</el-button>
            <el-button @click="dialogVisibleOperation.dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </template></Dialog
    >
  </div>
</template>

<script>
import { searchGoodsAPI } from '@/api'
export default {
  name: 'Sku',
  data() {
    return {
      // 搜索内容
      skuName: null,
      // 获取合作商数据的参数
      equipmentInfoParams: {
        pageIndex: 1,
        pageSize: 10,
        status: null
      },
      // 渲染列表
      equipmentInfo: {
        currentPageRecords: []
      },
      // 数据导入的弹框
      dialogVisibleOperation: {
        dialogTitle: '数据导入',
        dialogVisible: false,
        dialogWidth: '30%'
      }
    }
  },
  created() {
    this.fetchEquipmentList(this.equipmentInfoParams)
  },
  methods: {
    async fetchEquipmentList(data) {
      // 获取设备列表
      const res = await searchGoodsAPI(data)
      this.equipmentInfo = res.data
      console.log(res.data)
    },
    // 搜索框事件
    receiveInfo(value) {
      if (this.innerCode !== value) {
        this.skuName = value
        this.equipmentInfoParams.pageIndex = 1
        this.fetchEquipmentList({ ...this.equipmentInfoParams, skuName: this.skuName })
      }
    },
    // 批量操作的弹框
    moreOperation() {
      this.dialogVisibleOperation.dialogVisible = true
    },
    // 批量操作的确认事件
    async submitPolicy() {
      this.dialogVisibleOperation.dialogVisible = false
    },
    // 批量操作的关闭事件
    dialogCloseOperation() {
      this.policyValue = ''
    }
  },
  watch: {
    equipmentInfoParams: {
      handler() {
        this.fetchEquipmentList({ ...this.equipmentInfoParams, skuName: this.skuName })
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.equipment {
  .list {
    .el-col {
      margin-bottom: 20px;
    }
    /deep/.el-table th.el-table__cell {
      background-color: rgb(243, 246, 251);
    }
    /deep/tr.el-table__row {
      height: 45px !important;
    }

    /deep/.el-table td.el-table__cell {
      border: none;
      height: 0px;
      padding: 0;
      .el-button {
        height: 30px;
        line-height: 1px;
        margin: 10px 0 10px 10px;
        width: 80px;
      }
    }
    /deep/.el-table th.el-table__cell.is-leaf {
      border: none;
    }
    /deep/.el-button--warning {
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      text-align: center;
      .icon-jiahao:before {
        content: '\e726';
        margin-right: 5px;
      }
    }
    /deep/.el-button--info {
      background-color: #fbf4f0 !important;
      border: none;
      color: #333;
    }
    /deep/.el-table::before {
      height: 0;
    }
  }
  .confirm {
    width: 100%;
    padding-left: 20%;
    /deep/.el-button--primary {
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      border: none;
    }
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
